var title='';
$.fn.smartFloat = function() {
    var position = function(element) {
        var top = element.position().top, pos = element.css("position");
        title=element.find('.title').html();
        //touchstart touchend
        function sorl(){
            var scrolls = $(this).scrollTop();

            var Htop=parseInt($('.TabNav').height());
            if (scrolls > (top+Htop)) { //如果滚动到页面超出了当前元素element的相对页面顶部的高度
                console.log('1')
                $('.startPos').show();
            }else {
                console.log('2')
                $('.startPos').hide();
            }
        };
        $(window).on('touchmove',function(e){
            sorl();
        });
        $(window).scroll(function(e) {
            sorl();
        });
    };
    return $(this).each(function() {
        position($(this));
    });
};

$(function () {
    $(".startBox").smartFloat();
    $('body').on('click','.layuiClose',function () {
        layer.closeAll();
    });
    //如果当前任务已结束，则提示
    layer.open({
        content: '任务已结束，请谨慎操作'
        ,btn: '确定'
    });
    //选择工序
    $('body').on('click','.start',function () {
        var str='<div class="title"><i class="process iconfont icon-cuowu"></i><span class="startTxt">选择工序</span><span class="but layuiClose">取消</span></div>';
        var processUl='<ul class="processUl"><li>配料</li><li>上模</li><li>下模</li><li>调机</li></ul>';
        var equipmentUl='<ul class="equipmentUl" style="display: none"><li class="default">CNC(00121)</li><li>CNC(00122)</li><li>CNC(00123)</li><li>CNC(00124)</li><li>CNC(00125)</li><li>CNC(00126)</li><li>CNC(00127)</li><li>CNC(00128)</li></ul>';
        str+='<div class="content layuiContent">'+processUl+equipmentUl+'</div>';
        layer.open({
            type: 1
            ,content: str
            ,anim: 'up'
            ,style: 'position:fixed; bottom:0; left:0; width: 100%; height: 200px; padding:10px 0; border:none;'
        });
    });
    //选择工序-选择工序
    $('body').on('click','.processUl li',function () {
        $('.processUl').hide();
        $('.equipmentUl').show();
        $('.process').show();
        $('.startTxt').html('选择设备')
    });
    //选择工序-返回选择工序
    $('body').on('click','.process',function () {
        $('.processUl').show();
        $('.equipmentUl').hide();
        $('.process').hide();
        $('.startTxt').html('选择工序')
    });
    //选择工序-选择设备
    $('body').on('click','.equipmentUl li',function () {
        layer.closeAll();
        layer.open({
            content: '前置工序尚未完成'
            ,btn: '确定'
            ,shadeClose:false
            ,yes:function () {
                layer.open({
                    content: '将于设备CNC00212进行配料工序'
                    ,btn: ['确定', '取消']
                    ,shadeClose:false
                    ,yes: function(index){
                        layer.closeAll();
                    }
                });
            }
        });
    });
    //交班
    $('.main').on('click','.shift',function () {
        var str='<div class="title" style="padding-bottom: 0.3rem;">交班<i class="but layuiClose iconfont icon-cuowu"></i></div>';
        str+='<div class="conIntBox"><span class="txt">数量</span><span class="conInt"><input type="text" placeholder="输入本次完成的零件数量"></span></div>';
        str+='<div class="conIntBox"><span class="txt">批次</span><span class="conInt batch"><input type="text" placeholder="输入零件批次号"><i class="icon iconfont icon-jiantou2"></i></span></div>';
        str+='<div class="qualityModeBut">提交</div>';
        layer.open({
            className: 'layui-select',
            zIndex:200,
            //shadeClose:false,
            content: str
        });
    });
    //完成工序
    $('.main').on('click','.end',function () {
        var str='<div class="title" style="padding-bottom: 0.3rem;">完成工序<i class="but layuiClose iconfont icon-cuowu"></i></div>';
        str+='<div class="pauseText"><textarea rows="4" placeholder="请填写备注"></textarea></div>';
        str+='<div class="qualityModeBut">提交</div>';
        layer.open({
            className: 'layui-select',
            zIndex:200,
            //shadeClose:false,
            content: str
        });
    });
    //暂停工序
    $('body').on('click','.pause',function () {
        var str='<div class="title"><span class="startTxt">选择暂停原因</span><span class="but layuiClose">取消</span></div>';
        str+='<div class="content layuiContent pauseBut"><ul><li>保养停机</li><li>待料停机</li><li>设备故障</li><li>换料停机</li><li>其他</li></ul></div>';
        layer.open({
            type: 1
            ,content: str
            ,anim: 'up'
            ,style: 'position:fixed; bottom:0; left:0; width: 100%; height: 200px; padding:10px 0; border:none;'
        });
    });
    //暂停工序 - 选择暂停原因
    $('body').on('click','.pauseBut li',function () {
        layer.closeAll();
        var str='<div class="title" style="padding-bottom: 0.3rem;">具体原因<i class="but layuiClose iconfont icon-cuowu"></i></div>';
        str+='<div class="pauseText"><textarea rows="4" placeholder="请填写具体原因"></textarea></div>';
        str+='<div class="qualityModeBut active">提交</div>';
        layer.open({
            className: 'layui-select',
            zIndex:200,
            //shadeClose:false,
            content: str
        });
    });
})


/*
* tabNav 菜单切换
* */
tabNavInit()
tabNavRefresh()
function tabNavInit() {
    $('body').on('click', '.TabNavUl li', function () {
        $(this).parent('.TabNavUl').children('li').removeClass('active');
        $(this).addClass('active');
        $(this).siblings('.lanPos').css({
            'left': $(this).get(0).offsetLeft,
            'width': $(this).children('span').get(0).clientWidth
        });
        $(this).parent('.TabNavUl').animate({scrollLeft: $(this).get(0).offsetLeft - ($('.TabNavUl').width() / 2) + ($(this).children('span').get(0).clientWidth / 2)}, 300);
    });
}
function tabNavRefresh() {
    $('.TabNavUl').each(function () {
        if ($(this).find('.lanPos').length == 0) {
            $(this).append('<div class="lanPos"></div>');
        }
        $(this).find('.lanPos').css({
            'left': $(this).find('.active').get(0).offsetLeft,
            'width': $(this).find('.active').children('span').get(0).clientWidth
        });
        $(this).animate({scrollLeft: $(this).find('.active').get(0).offsetLeft - ($('.TabNavUl').width() / 2) + ($(this).find('.active').children('span').get(0).clientWidth / 2)}, 1);
    })
}
